
<div class="container_wrapper account_orderDetail_default" id="account_orderDetail">

    <h1 class="title">{{lang.account.orders_detail.title}}</h1>
    <!-- content -->

    <div class="order-header">
      <div class="order-header-status">
        <span class="mo-tag">{{account_order_detail.financial_status_name | upcase}}</span>
      </div>
      <div class="order-header-ID">{{account_order_detail.order_number}}</div>
      <div class="order-header-date format-date" data-date="{{account_order_detail.created_at}}" data-format="YYYY-mm-dd HH:MM:SS">{{account_order_detail.created_at  | date: "%Y-%m-%d %H:%M:%S"}}</div>
      {% if account_order_detail.financial_status == 200 and account_order_detail.status != 190 %}
      {% unless isTemplate %}
      <div class="order-header-cancel" data-id="{{account_order_detail.order_number}}">{{lang.account.orders_detail.cancel_order}}</div>
      {% endunless %}
      {% endif %}

    </div>

    <!-- order-table -->
    <div class="order-table">
      <div class="order-table-header">
        <span class="order-table-title">{{account_order_detail.total_price | money:account_order_detail.currency, true, false}}</span>
        {% if account_order_detail.financial_status == 200 and account_order_detail.status != 190 %}
        <a class="main_btn" href="{{account_order_detail.pay_url}}">{{lang.account.orders.pay_now}}</a>
        {% endif %}
      </div>
      <div class="order-table-body">
        <div class="order-table-body-info">

            <dl>
                <dt>{{lang.account.orders_detail.shipping_method}}</dt>
                <dd>{{account_order_detail.shipping_zone_plan_name | default:'-'}}</dd>
            </dl>

            <dl>
                <dt>{{lang.account.orders_detail.payment_method}}</dt>
                <dd>{{account_order_detail.payment_method | default:'-' }}</dd>
            </dl>
            {% unless isTemplate %}
            {% if account_order_detail.shipping_address %}
            <dl>
                <dt>{{lang.account.orders_detail.shipping_address}}</dt>
                <dd>{{account_order_detail.shipping_address.first_name}} {{account_order_detail.shipping_address.last_name}}</dd>
                {% if account_order_detail.shipping_address.company %}<dd>{{account_order_detail.shipping_address.company}}</dd>{% endif %}
                {% if account_order_detail.shipping_address.address1 %}<dd>{{account_order_detail.shipping_address.address1}}</dd>{% endif %}
                {% if account_order_detail.shipping_address.address2 %}<dd>{{account_order_detail.shipping_address.address2}}</dd>{% endif %}
                <dd>{{account_order_detail.shipping_address.city}}&nbsp;{{account_order_detail.shipping_address.province}}&nbsp;{{account_order_detail.shipping_address.zip}}</dd>
                {% if account_order_detail.shipping_address.country_name %}<dd>{{account_order_detail.shipping_address.country_name}}</dd>{% endif %}
                {% if account_order_detail.shipping_address.phone %}<dd>{{account_order_detail.shipping_address.phone}}</dd>{% endif %}
                
            </dl>
            {% endif %}
            
            {% if account_order_detail.bill_address %}
            {% assign bill_address = account_order_detail.bill_address  %}
            {% else %}
            {% assign bill_address = account_order_detail.shipping_address  %}
            {% endif %}
            <dl>
                <dt>{{lang.account.orders_detail.billing_address}}</dt>
                <dd>{{bill_address.first_name}} {{bill_address.last_name}}</dd>
                {% if bill_address.company %}<dd>{{bill_address.company}}</dd>{% endif %}
                {% if bill_address.address1 %}<dd>{{bill_address.address1}}</dd>{% endif %}
                {% if bill_address.address2 %}<dd>{{bill_address.address2}}</dd>{% endif %}
                <dd>{{bill_address.city}}&nbsp;{{bill_address.province}}&nbsp;{{bill_address.zip}}</dd>
                {% if bill_address.country_name %}<dd>{{bill_address.country_name}}</dd>{% endif %}
                {% if bill_address.phone %}<dd>{{bill_address.phone}}</dd>{% endif %}
                
            </dl>

            {%- if account_order_detail.additional_info -%}
            <dl>
              <dt>{{lang.checkout.additional_information}}</dt>
              {% for info in account_order_detail.additional_info %}

                {% for option in info.options %}
                {%- if option.values and option.title -%}
                <dd>{{option.title}} : {{option.values}}</dd>
                {%- endif -%}
                {% endfor %}
                
              {% endfor %}
            </dl>
            {%- endif -%}

            {%- if account_order_detail.note -%}
            <dl>
              <dt>{{lang.account.orders_detail.note}}</dt>
              <dd>{{account_order_detail.note | default:'-' }}</dd>
            </dl>
            {%- endif -%}
            {% endunless %}

        </div>

        {% if account_order_detail.logistics %}
        <div class="tracking-warp">
          <div class="tracking-header">{{lang.account.orders_detail.tracking}}</div>
          {% for logistic in account_order_detail.logistics %}
          <div class="tracking-item">
            <div class="tracking-item-title">{{logistic.tracking_company}} : {{logistic.tracking_number}}</div>
            {% if logistic.note %} <div class="tracking-item-des">{{logistic.note}}</div>{% endif %}
            <div class="tracking-item-data" style="display: none;" data-item='{{logistic | json}}'></div>
          </div>
          {% endfor %}
        </div>
        {% endif logistics %}

        <div class="order-product-header mo-row">
          <div class="mo-col-6">{{lang.account.orders_detail.googs}}</div>
          <div class="mo-col-2">{{lang.account.orders_detail.price}}</div>
          <div class="mo-col-2">{{lang.account.orders_detail.quantity}}</div>
          <div class="mo-col-2">{{lang.account.orders_detail.subtotal}}</div>
        </div>
        <div class="order-table-body-product">
          {% for product in account_order_detail.products %}

          <div class="mo-row order-product-item">
            <div class="mo-col-6">
              <div class="order-card-info">
                <a class="order-card-info-picture" href="/products/detail/{{ product.product_id }}?data_from={{data_from}}">
                  <img  data-src="{{ product.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" class="order-card-info-picture-image" alt="{{product.product_title}}" />
                </a>
                <div class="order-card-info-detail">
                  <a class="order-card-info-title" href="/products/detail/{{ product.product_id }}?data_from={{data_from}}">{{product.product_title}}</a>
                  {% if product.sku_value %}
                  <div class="order-card-info-sku">{{product.sku_value}}</div>
                  {% endif %}
                  <div class="order-card-info-sku">{{lang.account.orders_detail.spu}}: {{product.spu | default:"-" }}，{{lang.account.orders_detail.sku}}: {{product.sku | default:"-" }}</div>
                  
                  <div class="order-card-info-price">
                    <span>{{product.price | money:account_order_detail.currency, true, false }}</span>
                    <span>x</span>
                    <span>{{product.quantity}}</span>
                    <span>=</span>
                    <span>{{product.price | times:product.quantity | money:account_order_detail.currency, true, false }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="mo-col-2">
              <span>{{product.price | money:account_order_detail.currency, true, false}}</span>
            </div>
            <div class="mo-col-2">
              <span>{{product.quantity}}</span>
            </div>
            <div class="mo-col-2">
              <span>{{product.price | times:product.quantity  | money:account_order_detail.currency, true, false}}</span>
            </div>
          </div>
          {% endfor %}


          <!-- <div class="order-product-item order-card-info">
                      <div class="order-card-info-picture">
                          <img src="" class="order-card-info-picture-image" alt="" />
                      </div>
                      <div class="order-card-info-detail">
                          <div class="order-card-info-title">Army Green Cross Front Crop Top and Pocket Pant Set</div>
                          <div class="order-card-info-sku">Style: 8</div>
                          <div class="order-card-info-price">
                              <span>34.15</span>
                              <span>USD</span>
                              <span>X2</span>
                          </div>
                      </div>
                  </div> -->
        </div>

        <div class="mo-table-footer">
          <div class="pay-cell">
            <span class="pay-cell-labe">{{ lang.checkout.subtotal }}</span>
            <span class="pay-cell-value">{{account_order_detail.current_subtotal_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% if account_order_detail.current_coupon_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{ lang.checkout.coupon_discount }}</span>
            <span class="pay-cell-value">{{account_order_detail.current_coupon_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}
          {% if account_order_detail.current_promotion_price != 0 %}

          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.promotion_discount}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_promotion_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}

          
          {% comment %} {% if account_order_detail.coupon_code %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.account.orders_detail.discount_code}}</span>
            <span class="pay-cell-value">{{account_order_detail.coupon_code}}</span>
          </div>
          {% endif %} {% endcomment %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.shipping_price}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_shipping_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% if account_order_detail.current_insurance_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.insurance}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_insurance_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}
          {% if account_order_detail.current_payment_price != 0 %}
            <div class="pay-cell">
              <span class="pay-cell-labe">{{lang.checkout.payment_price}}</span>
              <span class="pay-cell-value">{{account_order_detail.current_payment_price | money:account_order_detail.currency, true, false}}</span>
            </div> 
          {% endif %}
          {% if account_order_detail.current_tax_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.tax}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_tax_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}

          {% if account_order_detail.current_tip_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">
              {% if tip_setting %}
              {{ tip_setting.param.title }}
              {% else %}
              {{ lang.checkout.tip }}
              {% endif %}
            </span>
            <span class="pay-cell-value">{{account_order_detail.current_tip_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}
          <div class="pay-cell pay-cell-total">
            <span class="pay-cell-labe">{{lang.checkout.total_price}}</span>
            <span class="pay-cell-value">{{account_order_detail.total_price | money:account_order_detail.currency, true, false}}</span>
          </div>
        </div>
      </div>
    </div>

    



  <div class="back-box">
    <a href="{% if isTemplate %}javascript:history.go(-1);{% else %}/account/orders{% endif %}">
      {% include icon_account_back ,width:'32',height:'28' %}
      <span>{{ lang.account.orders_detail.back }}</span>
    </a>
  </div>
</div>

<script type="text/javascript">
  (function(){
    console.log({{ account_order_detail | json }})
     moi.setPageStorage('order_detail', {{account_order_detail | json}});
  $('.order-header-cancel').click(function () {
    const id = $(this).data('id');
    moi.confirm({
      title: '{{lang.account.orders.cancel_text}}' ,
      ok: function () {
        moi.ajax({
          url: '/account/orders/' + id,
          type: "put",
          success: function (data) {
            location.reload();
          }
        })
      }
    })
  })  
  })()
</script> 